import React from 'react'
import { Link } from 'umi';
import type { MenuProps } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Badge, Layout, Dropdown } from 'antd';

import styles from './index.less'
import Drawer, { useDrawer } from '@/pages/components/Drawer';

const { Header } = Layout;

const items: MenuProps['items'] = [
    {
        key: '1',
        label: <div>个人中心</div>,
    },
    // {
    //     key: '2',
    //     label: (
    //         <a target="_blank" rel="noopener noreferrer" href="XXXXXXXXXXXXXXXXXXXXXX">
    //             2nd menu item
    //         </a>
    //     ),
    // },
    // {
    //     key: '3',
    //     label: (
    //         <a target="_blank" rel="noopener noreferrer" href="XXXXXXXXXXXXXXXXXXXXXX">
    //             3rd menu item
    //         </a>
    //     ),
    // },
];

const LHHeader = () => {
    const drawer = useDrawer();
    return (
        <>
            <Header>
                <div className={styles.header}>
                    <Dropdown
                        menu={{
                            items,
                            onClick: (e) => {
                                if (e.key === '1') {
                                    drawer.open()
                                }
                            }
                        }}
                    >
                        <div className={styles.user_info}>
                            <Badge count={0} size='small'>
                                <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                            </Badge>
                            <div className={styles.Admin}>Admin</div>
                        </div>
                    </Dropdown>
                </div>
            </Header>
            <Drawer
                drawer={drawer}
                title="个人中心"
                onClose={() => drawer.close()}
            >
                内容
            </Drawer>
        </>
    )
}

export default LHHeader